<template>
  <div class="w">

    <!-- 标题 -->
    <div class="title-area">
      <span>
        评测任务管理
      </span>
    </div>

    <!-- 主体内容显示区 -->
    <div class="content-area">

      <!-- 查询表单区 -->
      <div class="form-area">
        <Form
          name="queryForm"
          ref="queryForm"
          :model="queryForm"
          :labelCol="{span: 5, offset: 0}"
          :initialValues="{}">

          <Row :gutter="16">
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="name" label="评测名称" initialValue="">
                  <Input placeholder="请输入评测名称" style="width: 70%" v-model="queryForm.name" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="address" label="评测结果" initialValue="">
                  <Input placeholder="请选择评测结果" style="width: 70%" v-model="queryForm.result" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="contacts" label="评测代码" initialValue="">
                  <Input placeholder="请输入评测代码" style="width: 70%" v-model="queryForm.code" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="tel" label="产品" initialValue="">
                  <Input placeholder="请选择产品" style="width: 70%" v-model="queryForm.product" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem :wrapperCol="{span: 20, offset: 5}">
                  <Button type="primary" @click="onSubmit">查 询</Button>
                  <Button style="margin-left: 10px" @click="onReset">重 置</Button>
                  <Button type="link" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></Button>
                </FormItem>
              </div>
            </Col>
          </Row>  
        </Form>
      </div>


      <!-- 分割线 -->
      <Divider />


      <!-- 按钮区 -->
      <div class="button-area">
        <Button type="primary" @click="showFormPage">
          <Icon name="add" /> 新增
        </Button>
      </div>


      <!-- 列表区 -->
      <Table
        style="margin-top: 20px"
        :columns="tableColumns"
        :dataSource="tableData"
        :bordered="false"
        :rowKey="(record) => record.key"
        @change="handleTableChange"
        size="small"
        :scroll="{y: 470}"
        :pagination="{
          total: tableData.length,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSize,
          current,
        }">
        <template #paginationTotal="props">
          <span>总共{{ props.total }} 条</span>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
export default {
    name: "app",
    data: function () {
      return {
        queryForm: {
          name: "",
          result: "",
          code: "",
          product: ""
        },
        tableColumns: [
          {"title":"序号", "dataIndex":"id", "key":"id", width: 60},
          {"title":"用例名称", "dataIndex":"name", "key":"name"},
          {"title":"用例代码", "dataIndex":"code", "key":"code"},
          {"title":"用例类型", "dataIndex":"type", "key":"type"},
          {"title":"输入", "dataIndex":"input", "key":"input"},
          {"title":"期待结果", "dataIndex":"expection", "key":"expection"},
          {"title":"入库时间", "dataIndex":"storeTime", "key":"storeTime", "width":200},
          {"title":"操作", "dataIndex":"operation", "key":"operation", "width":200,
            render: (text, record, index) => {
              return this.$createElement('span', {}, [
                this.$createElement('a', { on: { click: () => this.tblOptEdit(record) } }, '编辑'),
                this.$createElement('span', { style: "color: #D8D8D8;" }, ' | '),
                this.$createElement('a', { on: { click: () => this.tblOptRemove(record) } }, '删除')
              ])
            }
          },
        ],
        tableData: [
          { "id":"1",  "name":"用例_达梦",     "code":"dm10010",     "type":"功能类", "input":"1982646128401", "expection":"是", "storeTime":"2017-10-31 12:13:00" },
          { "id":"2",  "name":"用例_金仓",     "code":"kb10016",     "type":"功能类", "input":"1982646128401", "expection":"是", "storeTime":"2017-10-31 12:13:00" },
          { "id":"3",  "name":"用例_神舟通用", "code":"st15185",     "type":"压测类", "input":"1982646128401", "expection":"是", "storeTime":"2017-10-31 12:13:00" },
          { "id":"4",  "name":"用例_南大通用", "code":"nd12315",     "type":"压测类", "input":"1982646128401", "expection":"是", "storeTime":"2017-10-31 12:13:00" },
          { "id":"5",  "name":"用例_瀚高",     "code":"hg18588",     "type":"压测类", "input":"1982646128401", "expection":"否", "storeTime":"2017-10-31 12:13:00" },
          { "id":"6",  "name":"用例_万里开源", "code":"wl188888",    "type":"功能类", "input":"1982646128401", "expection":"否", "storeTime":"2017-10-31 12:13:00" },
          { "id":"7",  "name":"用例_易鲸捷",   "code":"yjj8000",     "type":"压测类", "input":"1982646128401", "expection":"是", "storeTime":"2017-10-31 12:13:00" },
          { "id":"8",  "name":"用例_优炫",     "code":"yx_5001",     "type":"功能类", "input":"1982646128401", "expection":"否", "storeTime":"2017-10-31 12:13:00" },
          { "id":"9",  "name":"用例_海量数据", "code":"hl_data_01",  "type":"压测类", "input":"1982646128401", "expection":"否", "storeTime":"2017-10-31 12:13:00" },
          { "id":"10", "name":"用例_云和恩墨", "code":"cc_bg1024",   "type":"功能类", "input":"1982646128401", "expection":"否", "storeTime":"2017-10-31 12:13:00" },
        ],
        current: 1,
        pageSize: 5,
      }
    },
    methods: {
      tblOptEdit: function (record) {
        this.$router.push({
          path: '/taskDetails',
          query: { record: record }
        });
      },
      tblOptRemove: function (record) {
        console.log("tblOptRemove: ", record);
      },
      onSubmit() {
        console.log('on submit: ', this.queryForm);
        // this.$refs.queryForm.submit();
      },
      onReset() {
        console.log('on reset');
        this.queryForm = {
          name: "",
          product: "",
          appType: "",
          programmeType: ""
        }
        // this.$refs.queryForm.reset();
      },
      handleTableChange(p, filters) {
        const { current, pageSize } = p;
        this.current = current;
        this.pageSize = pageSize;
        console.log('===>>>>filters', p, filters);
      },
      showFormPage: function () {
        this.$router.push('/taskForm')
      }
    }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }

  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

